<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
        />
      </el-form-item>
      <el-form-item prop="scenicId">
        <KiSelect
          v-model="list.filter.scenicId"
          placeholder="输入景区名称搜索"
          :search="
            scenicName =>
              new Promise(resolve => {
                $POST('sot-admin-api/scenic/listForSelect', {
                  scenicName
                }).then(({ data }) => {
                  resolve(data)
                })
              })
          "
          :options.sync="options.scenic"
          :props="{ value: 'scenicId', label: 'scenicName' }"
        />
      </el-form-item>
      <el-form-item prop="reservationEndDate" label="预约日期：">
        <TimeRangePicker
          :start.sync="list.filter.reservationBeginDate"
          :end.sync="list.filter.reservationEndDate"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <span style="margin-right: 32px;font-weight: bold">
          预约总人数：{{ reservationTotal }}
        </span>
        <ExportExcel
          url="/sot-admin-api/reservation/reservation-statistics/downloadStatisticsList"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="所属地区" prop="areaName" />
      <el-table-column label="景区名称" prop="scenicName" />
      <el-table-column label="预约日期" prop="reservationDate" />
      <el-table-column label="预约人数" prop="reservationNum" />
      <el-table-column label="已结束人数" prop="closeNum" />
      <el-table-column label="核销入园人数" prop="consumerNum" />
    </el-table>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import dayjs from 'dayjs'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/reservation/reservation-statistics',
      axiosConfig: {
        getList: {
          url: 'queryReservationStatistics'
        }
      },
    }, {
      initialListFilter() {
        return {
          reservationBeginDate: dayjs()
            .subtract(1, 'month')
            .format('YYYY-MM-DD'),
          reservationEndDate: dayjs()
            .add(13, 'day')
            .format('YYYY-MM-DD')
        }
      }
    }),
  data () {
    return {
      reservationTotal: null,
      scenicList: [],
      options: {
        scenic: []
      }
    }
  },
  watch: {
    'list.filter': {
      deep: true,
      handler () {
        this.queryReservationTotal()
      }
    }
  },
  methods: {
    queryReservationTotal () {
      this.reservationTotal = null
      this.$POST(
        'sot-admin-api/reservation/reservation-statistics/queryReservationTotal',
        this.list.filter
      ).then(res => {
        this.reservationTotal = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
